<template>
   <!-- 商品列表 -->
    <!-- 
        loading bool值，表示是否正在加载 
        finished bool值，表示是否加载完成
        load 事件，当滚动条触底的时候触发
      -->
    <list
  v-model:loading="loading"
  :finished="finished"
  @load="loadData"
  finished-text="没有更多了"
>
<div v-masonry transition-duration="0.3s" item-selector=".item">
      <div v-masonry-tile class="item" v-for="item in products" :key="item.id">
        <!-- 你要渲染的图片啦，文字一类的代码块 -->
        <img
          :src="item.imgs"
          alt="加载失败"
          class="imgs"
          @click="toPrDetail(item.id)"
        />
        <p class="desc"><tag round type="primary" class="tag">包邮</tag>{{item.goodsDescribe}}</p>
        <p> <strong>￥<span class="price">{{item.goodsPrice}}</span></strong> <span class="want">20人想要</span></p>
        <p>
          <!-- 头像 -->
          <img :src="item.userAvatar?item.userAvatar:'https://s1.328888.xyz/2022/10/09/g4c5C.jpg'" alt="" 
          class="userAvatar" >
          <!-- 网名 -->
          <span class="nickname">{{item.userNickname}}</span>
        </p>
      
      </div>
    </div>
  </list>
</template>
<script setup>
import {
  Search,
  Button,
  Toast,
  Swipe,
  Card,
  List,
} from "vant";
import { ref } from "vue";
import { loadProductsAPI } from "../services/product";
import { Tag,Image as VanImage } from 'vant';
import { useRouter } from "vue-router";
const loading = ref(false); // 当loading为true的时候，触底之后会触发load事件
const finished = ref(false);//当finished值为true的时候，表示加载完毕
const products = ref([]);
const router = useRouter();
const loadData = () => {
 finished.value=true;
}
loadProductsAPI().then((res)=>{
    products.value=res.data;
  })
//点击图片跳转到商品详情页
const toPrDetail = (id) => {
  router.push({
    name: "Pdetail",
    query: {
      id,
    },
  });
};
</script>
<style>
.item{
  width: 50vw;
  padding: 0 1rem;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}
.desc{
  width: 43vw;
  margin-bottom: .4rem;
  color: #333333 ;
}
.price{
  font-size: 1.6rem;
}
.want{
  color: #999999;
  font-size: .8rem;
  margin-left: .4rem;
}
.tag{
  margin-right: .6rem;
}
.van-list{
  margin-top: .5rem;
}
.post{
  background-color: #00a6d6;
  color: #fff;
  border-radius: 5px;
}
.imgs{
  width: 48vw;
  display: inline-block;
  border-radius: 10px;
}
.userAvatar{
  width: 1.7rem;
  height: 1.7rem;
  display: inline-block;
  border-radius: 1.7rem;
  margin-top: .8rem;
  vertical-align: bottom;
}
.nickname{
  line-height: .1rem;
  color: #999999;
  padding-left: .8rem;
}

</style>
